<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            text-align: center;
            position: relative;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: darksalmon;
            margin: 0 auto;
            padding: 10px;
            border: 2px solid red;
            position: relative;
        }
        #box2{
            width: 150px;
            height: 100px;
            background-color: aquamarine;
            margin: 0 auto;
            /* overflow: hidden; 多余裁剪*/
            overflow: auto;
        }
        #box3{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1"></div>
        <br>
        <div id="box2">
            <div id="box3"></div>
        </div>
        <br>
        <button id="btn">点击获取</button>
    </div>


    <script>
        window.onload = function (){
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2")
            var btn = document.getElementById("btn");
            
            btn.onclick = function (){
                /**
                 * clienWidth;
                 * clienHeight;
                 *  这两个属性可以获取元素的可见宽度和高度
                 *  且这些属性都是不带px的，返回都是一个数字，可以直接进行技算
                 * 
                 * 注意：这些属性是只读，不可修改！
                */
               console.log("clilenWidth:内边距+内容区="+box1.clientHeight);//获取高度100
               console.log("clilenHeight:内边距+内容区="+box1.clientWidth);//获取宽度100

               /**
                * offsetWidth
                * offsetHeight
                *   获取元素的整个宽度和高度，包括内容区、内边距和边框
                * 
               */
                console.log("offsetWidth:"+box1.offsetWidth);//宽度为124
                console.log("offsetHeight:"+box1.offsetHeight);//高度为124

                /**
                 * offsetParent:
                 *  可以用来获取当前元素的定位父元素
                 *  会获取到当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
                */
               console.log(box1.offsetParent);

               /**
                * offsetLeft
                *   当前元素相对于其定位父元素的水平偏移量
                * offsetTop 
                *   当前元素相对于其定位父元素的垂直偏移量
               */
                console.log("offsetLeft:"+box1.offsetLeft);//134
                console.log("offsetTop:"+box1.offsetTop);//0

                /**
                 * scrollWidth
                 * scrollHeight
                 *  可以获取元素整个滚动区域的宽度和高度 
                */
               console.log("scrollWidth:"+box2.scrollWidth);//200
               console.log("scrollWidth:"+box2.scrollHeight);//200

               /**
                * scrollLeft
                *   可以获取水平滚动条滚动的距离
                * scorllTop
                *   可以获取垂直滚动条滚动的距离
               */
              console.log("水平滚动距离"+box2.scrollLeft);
              console.log("垂直滚动距离"+box2.scrollTop);

              /**
               * 当垂直滚动条到底时提示，你已经到底了！
               * 当水平滚动条到最右边时提示：右边没有l
              */
             if(box2.scrollHeight - Math.round(box2.scrollTop) == box2.clientHeight){
                 alert("你已经到底了！")
             };
             if(box2.scrollWidth - Math.round(box2.scrollLeft) == box2.clientWidth){
                 alert("右边没有了！")
             }
            }
        }
    </script>
</body>
</html>